<template>
	<div @click="$emit('onClickCover')" class="recommentItem mb-4 position-relative dailyBox">
		<div class="recommendItemImg start-0 top-0 position-absolute rounded-4 cursor-pointer overflow-hidden">
			<div class="position-absolute fs-5 w-100 dailyTips text-white p-2">根据您的音乐口味生成每日更新</div>
			<div class="position-absolute translate-middle w-50 h-50 top-50 start-50">
				<div class="nowDay position-absolute start-50 translate-middle text-white">
					{{ String(nowDay).padStart(2, "0") }}
				</div>
				<CalendarIcon width="100%" height="100%" />
			</div>
			<div @click.stop="$emit('onClickPlay')" class="position-absolute rounded-circle hover-play justify-content-center align-items-center">
				<div class="trigonalPlay"></div>
			</div>
		</div>
		<div class="recTitle position-absolute start-0 bottom-0 w-100 fs-5 text-muted">每日歌曲推荐</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
	emits: ["onClickCover", "onClickPlay"],
	setup() {
		const state = reactive({
			nowDay: new Date().getDate(),
		});
		return {
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.recommentItem {
	padding-left: 18%;
	padding-top: calc(18% + 4.5rem);
	// margin-right: 2%;
	.recommendItemImg {
		padding-left: 100%;
		padding-top: 100%;
		background-color: #ccc;
		background-size: cover;
		background-repeat: no-repeat;
		* {
			z-index: 3;
		}
		.playCountLine {
			top: 3px;
			right: 8px;
		}
		.hover-play {
			display: none;
			width: 28px;
			height: 28px;
			right: 6px;
			bottom: 6px;
			opacity: 0;
			background-color: rgba($color: #fff, $alpha: 0.85);
			.trigonalPlay {
				border-top: calc(8px * 0.8) solid transparent;
				border-right: calc(8px * 0.8) solid transparent;
				border-bottom: calc(8px * 0.8) solid transparent;
				transform: translateX(30%);
			}
		}
		&:after {
			left: 0;
			top: 0;
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			background-image: radial-gradient(transparent, rgba($color: #000000, $alpha: 0.1));
			z-index: 2;
		}
		&:hover {
			.hover-play {
				display: flex;
				animation: opacityShow 0.6s;
				animation-fill-mode: forwards;
			}
			@keyframes opacityShow {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
		}
	}
	.recTitle {
		@include ellipsis(2);
		min-height: 4rem;
		bottom: 0;
	}
}
.dailyBox {
	position: relative;
	z-index: 1;
	overflow: hidden;
	> * {
		z-index: 2;
	}
	.recommendItemImg {
		background-color: transparent;
		.dailyTips {
			left: 0;
			top: -58px;
			height: 4.5rem;
			box-sizing: border-box;
			background-color: rgba($color: #000000, $alpha: 0.4);
			transition: top ease 0.4s;
			@include ellipsis(2);
		}
		&:hover {
			.dailyTips {
				top: 0;
				transition: top ease 0.4s;
			}
		}
		&::before {
			top: 0;
			left: 0;
			z-index: -2;
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url(https://p2.music.126.net/uTCh9G5LvjQ1z32dBE5_8A==/109951165872244163.jpg);
			background-size: cover;
			filter: blur(10px);
		}
		&::after {
			top: 0;
			left: 0;
			z-index: -1;
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: radial-gradient(transparent, #000);
			opacity: 0.65;
		}
	}
	.nowDay {
		top: 60%;
		font-size: 2.8vw;
	}
}
.primaryTheme {
	.trigonalPlay {
		border-left: calc(12px * 0.8) solid $primary;
	}
}
.darkTheme {
	.trigonalPlay {
		border-left: calc(12px * 0.8) solid $dark;
	}
}
.freeTheme {
	.trigonalPlay {
		border-left: calc(12px * 0.8) solid $free;
	}
}
</style>
